<template>
  <div class="container">
    <div class="left">
      <p>查询模式选择</p>
      <div v-for="(item, index) in options" :key="index">
        <div class="option" :class="{ active: index === activeIndex }" @click="handleClick(item, index)">
          <div class="icon"><i :class="['iconfont', item.icon]"></i></div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="controls">
        <p><span>图标</span><span class="right-title">站控措施</span></p>
        <div class="icons" v-for="(item, index) in station_solutions" :key="index">
          <div class="icon"><i :class="['iconfont', item.iconName]"></i></div>
          <div class="line"></div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
      <div class="line-plan" v-if="linePlanShow">
        <RouteDesignCard />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getLine } from '@/api/line.js';
import { station_solutions } from '@/store/staticData';
import { renderHeat, renderStationBill } from '@/cesiumTools/effectController.js';
import { useLineData, useMeasureData } from '@/store';
import RouteDesignCard from './RouteDesignCard.vue';

let lineData = [];
const lineDataStore = useLineData();
const measureDataStore = useMeasureData();
let removeHeat = null;
let viewer = null;
const linePlanShow = ref(false);
const subLineData = ref([]);
const options = ref([
  { icon: 'icon-yongjidu', title: '站点拥挤度' },
  { icon: 'icon-lujingguihua', title: '路径规划' },
  { icon: 'icon-rail-metro-', title: '站控措施' },
]);
const icons = ref([{ icon: 'icon-yongjidu', title: '重保' }]);
const activeIndex = ref();
const handleClick = (item, index) => {
  activeIndex.value = index;
  linePlanShow.value = false;
  removeHeat && removeHeat();
  // 处理地图效果
  handleEffect(item.title);
  // 处理ui
  /* queryItems.value = queryItems.value.map((n) => {
    if (n.id === item.id) {
      n.active = true;
      queryWay.value = item.title;
    } else {
      n.active = false;
    }
    return n;
  }) */
};
// 根据查询方式处理效果
const handleEffect = title => {
  if (title === '站点拥挤度') {
    renderClowed();
  } else if (title === '路径规划') {
    linePlanShow.value = true;
  } else if (title === '站控措施') {
    renderStationMeasure();
  }
};

// 站点拥挤度逻辑,点击展示热力图，表现各个站点的拥挤程度
const renderClowed = () => {
  // 解析线路拥挤度数据
  const dataSource = [];
  // 清除当前底图，然后添加arcgis底图
  subLineData.value.forEach(item => {
    const { stationsList } = item;
    stationsList.forEach(s => {
      const { position } = s;
      dataSource.push({
        x: position.lng,
        y: position.lat,
        value: Math.ceil(Math.random() * 1000),
      });
    });
  });
  removeHeat = renderHeat(viewer, dataSource);
};

// 渲染站控措施
const renderStationMeasure = () => {
  // 随机生成[min,max]区间内的随机数
  function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
  }

  // 从数组中随机取几个数
  const getRandomArrayValue = (arr, num) => {
    // 创建原数组的浅拷贝，避免修改原数组
    let sData = arr.slice(0),
      i = arr.length, //设置循环起始点为数组长度
      min = i - num, //计算出要开始截取的最小索引，即从哪个位置开始保留元素作为最终结果
      item,
      index;
    // 部分 Fisher-Yates 洗牌算法，仅洗牌最后 num 个元素
    //循环将遍历数组的最后 num 个元素。每次迭代后，i 的值都会减一，直到它等于 min。
    while (i-- > min) {
      // 在 [0, i] 范围内随机选择一个索引
      index = Math.floor((i + 1) * Math.random());
      // 执行元素交换，这一步骤保证了每个元素都有等概率被选中并移动到数组的最后部分。
      item = sData[index];
      sData[index] = sData[i];
      sData[i] = item;
    }
    // 获取经过部分洗牌后的最后 num 个元素，形成一个新的数组并返回。
    return sData.slice(min);
  };

  const resultData = [];
  lineDataStore.allData.forEach(item => {
    const { stationsList, color } = item;
    const result = stationsList.map(s => {
      // 0-5个站控措施
      const measureNum = getRandomIntInclusive(0, 5);
      let measures = getRandomArrayValue(station_solutions, measureNum);
      s.measures = measures;
      s.color = color;
      return {
        name: s.name,
        measures,
      };
    });
    resultData.push(result);
  });
  // 全局共享站控措施数据
  measureDataStore.setData(resultData);
};
onMounted(async () => {
  viewer = lineDataStore.Viewer;
  lineData = await getLine();
  lineData.forEach(item => {
    subLineData.value.push(item);
  });
});
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  position: absolute;
  width: 100%;
  padding: 0 100px;
  top: 7%;
  z-index: 999;
}
.left {
  p {
    color: white;
    font-size: 20px;
    margin-bottom: 30px;
  }
  .option {
    display: flex;
    gap: 40px;
    margin-top: 20px;
    align-items: center;
    color: white;
    i {
      background-image: url('@/assets/uiResources/icon-wrapper-active.png');
      background-size: cover;
      background-repeat: no-repeat;
      padding: 10px;
      font-size: 15px;
      cursor: pointer;
    }
    i:hover {
      color: aqua;
    }
    .title {
      background-image: url('@/assets/uiResources/button.png');
      background-size: cover;
      background-repeat: no-repeat;
      padding: 10px 20px;
      cursor: pointer;
    }
    .title:hover {
      color: aqua;
    }
  }
}
.right {
  position: absolute;
  top: 0;
  right: 40px;
  color: white;
  .icons {
    margin-top: 5px;
    display: flex;
    .icon {
      background-image: url('@/assets/uiResources/icon-wrapper-active.png');
      background-size: cover;
      background-repeat: no-repeat;
      padding: 5px 10px;
    }
    .title {
      background-image: url('@/assets/uiResources/button.png');
      background-size: cover;
      background-repeat: no-repeat;
      padding: 5px 20px;
      font-size: 14px;
    }
    .line {
      width: 30px;
      height: 2px;
      margin-top: 15px;
      background-color: rgba(255, 255, 255, 0.5);
    }
  }
}
.active {
  color: aqua !important;
}
span {
  font-size: 18px;
}
.right-title {
  margin-left: 30px;
}
p {
  margin-bottom: 5px;
}
.line-plan {
  position: absolute;
  top: 10px;
  right: 280px;
}
</style>
